<script setup>
import { ref, onMounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { EffectCube } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/effect-cube'

const videos = ref([
  'http://192.168.88.131:9000/smmisia/st4.mp4',
  'http://192.168.88.131:9000/smmisia/st2.mp4',
  'http://192.168.88.131:9000/smmisia/st3.mp4',
  'http://192.168.88.131:9000/smmisia/st4.mp4'
])

const currentVideoIndex = ref(0)

const onSlideChange = (swiper) => {
  // 暂停所有视频
  const videoElements = document.querySelectorAll('video')
  videoElements.forEach((video, index) => {
    if (index !== swiper.activeIndex) {
      video.pause()
      video.currentTime = 0
    }
  })
  
  // 播放当前视频
  const currentVideo = videoElements[swiper.activeIndex]
  if (currentVideo) {
    currentVideo.play()
  }
  currentVideoIndex.value = swiper.activeIndex
}

onMounted(() => {
  // 自动播放第一个视频
  const firstVideo = document.querySelector('video')
  if (firstVideo) {
    firstVideo.play()
  }
})
</script>

<template>
  <div class="video-container">
    <swiper
      :modules="[EffectCube]"
      :effect="'cube'"
      :direction="'vertical'"
      :cube-effect="{
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94
      }"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="(video, index) in videos" :key="index">
        <div class="video-wrapper">
          <video
            :src="video"
            class="video-player"
            loop
            preload="auto"
            webkit-playsinline
            playsinline
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            :muted="index !== currentVideoIndex"
          />
          <div class="video-overlay">
            <div class="interaction-buttons">
              <div class="button-item">
                <van-icon name="like-o" size="30" color="#fff" />
                <span>点赞</span>
              </div>
              <div class="button-item">
                <van-icon name="comment-o" size="30" color="#fff" />
                <span>评论</span>
              </div>
              <div class="button-item">
                <van-icon name="share-o" size="30" color="#fff" />
                <span>分享</span>
              </div>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<style scoped lang="scss">
.video-container {
  height: 100vh;
  width: 100vw;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;

  :deep(.swiper) {
    height: 100%;
    width: 100%;
  }

  .video-wrapper {
    position: relative;
    height: 100%;
    width: 100%;

    .video-player {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .video-overlay {
      position: absolute;
      right: 20px;
      bottom: 100px;
      z-index: 10;

      .interaction-buttons {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .button-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #fff;
          
          span {
            margin-top: 5px;
            font-size: 12px;
          }

          &:active {
            transform: scale(0.95);
          }
        }
      }
    }
  }
}

:deep(.swiper-cube-shadow) {
  background: rgba(0, 0, 0, 0.6);
}
</style> 